<template>
    <div class="main">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label = "名称">
                <el-input :disabled="nameFlag" v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label = "年龄">
                <el-input :disabled="ageFlag" v-model="form.age"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button :disabled="flag" @click="sumbit">提交</el-button>
                <router-link to="*">
                    <el-button>返回</el-button>
                </router-link>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        created () {
            var id = this.$route.query.id;
            if(null != id){
                var type = this.$route.query.type;
                console.log(type)
                this.$axios({
                    method:'get',
                    url:'http://localhost:8888/sbdemo/test/fOne?id=' + id,
                }).then((res)=>{
                    this.form = res.data;
                }).catch((res)=>{
                    alert('请求出现异常')
                })
                if(type == 0){
                    //up
                    this.flag = false;
                    this.nameFlag = false;
                    this.ageFlag = false;
                    this.addOrUpdate = 1;
                }else if(type == 1){
                    //look 把按钮禁用掉
                    this.flag = true;
                    this.nameFlag = true;
                    this.ageFlag = true;
                }
            }else {
                this.addOrUpdate = 0;
                this.flag = false;
            }

        },
        data() {
            return {
                form :{
                    id : 0,
                    name : '',
                    age : ''
                },
                flag:false,
                nameFlag:false,
                ageFlag:false,
                addOrUpdate:0
            }
        },
        methods : {
            sumbit(){
                if(this.addOrUpdate == 0){
                    this.$axios({
                        method:'get',
                        url:'http://localhost:8888/sbdemo/test/add?name=' + this.form.name + '&age=' + this.form.age
                    }).then((res)=>{
                        alert('success');
                        this.$router.push({path:'*'});
                    }).catch((res)=>{
                        alert('请求出现异常')
                    })
                }else if(this.addOrUpdate == 1){
                    this.$axios({
                        method:'get',
                        url:'http://localhost:8888/sbdemo/test/up?name=' + this.form.name + '&age=' + this.form.age + '&id=' + this.form.id
                    }).then((res)=>{
                        alert('success');
                        this.$router.push({path:'*'});
                    }).catch((res)=>{
                        alert('请求出现异常')
                    })
                }
            }
        }
    }
</script>

<style>
    .main{
        height: 800px;
        width: 300px;
    }
</style>